<template>
 <continer>
    <template slot="prompt">
      <div class="prompt"><span class="V7_iconfont V7_iconV7tubiao_tishi"></span>留言暂不支持微信、小程序渠道</div>
    </template>
    <template slot="content">
      <el-form
        class="m7-form"
        :label-position="labelPosition"
        :model="formData"
        size="mini"
        :rules="rules"
        ref="nodeForm">
        <el-form-item label="节点名称" prop="name">
          <el-input v-model="formData.name" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="留言引导文案" prop="leaveMessageObj.content"
          :rules="[
            { required: true, message: '留言引导文案必填', trigger: 'change' }
          ]">
          <div class="has-config">
            <el-input v-model="formData.leaveMessageObj.content" size="mini"></el-input>
            <i class="V7_iconfont V7_iconV7tubiao_gerenshezhi-shezhi"
              @click="setMessage(formData.leaveMessageObj)"></i>
          </div>
        </el-form-item>
         <el-form-item label="留言可见范围" prop="visualPeers"
          :rules="[
            { required: true, message: '技能组必填', trigger: 'change' }
          ]">
          <m7Select filterable
            clearable
            v-model="formData.visualPeers"
            size="mini" :options="queueList"
            :defaultProps="{value: '_id', label: 'name'}"
            multiple
            :collapse-tags="false"
            placeholder="请选择技能组">
          </m7Select>
        </el-form-item>
      </el-form>
      <el-dialog
        :title="messageDialogTitle"
        :visible.sync="dialogSetMessageVisible"
        :modal="false"
        :width="'480px'"
        :top="'30vh'">
        <setMessage
          ref="setMessage"
          :placeholderObj="placeholderObj"
          :placeholder="messagePlaceholder"
          :value="messageObj"
          @input="messageObjChange"></setMessage>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogSetMessageVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveMessage">确 定</el-button>
        </div>
      </el-dialog>
    </template>
    <template slot="oprate">
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
    <template slot="remove">
      <el-button @click="deleteNode" type='danger' size="mini">删除</el-button>
    </template>
  </continer>
</template>
<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import continer from '@/components/configCommon/ui-modules/drawer-container.vue'
import nodeEidtMixins from './nodeEidtMixins'
import setMessage from './common/setMessage.vue'
@Component({
  name: 'im-node-leave',
  components: { continer, setMessage }
})
export default class extends Mixins(nodeEidtMixins) {
  private messageDialogTitle: string = '设置留言引导文案'

  private messagePlaceholder: string = '现在是非工作时间，如需帮助，请留言'

  private dialogSetMessageVisible: boolean = false

  private placeholderObj = {
    isShow: true,
    options: ['访客名称', '座席工号', '座席昵称']
  }

  private messageObj = { content: '', textType: 'ordinary' }

  private setMessage (obj: any) {
    this.dialogSetMessageVisible = true
    this.messageObj.content = obj.content
  }

  private messageObjChange (obj: any) {
    this.formData.leaveMessageObj.content = obj.content
  }

  private saveMessage (): void {
    (this.$refs as any).setMessage.refresh()
    this.dialogSetMessageVisible = false
  }
}
</script>
<style lang="stylus" scoped>
.has-config
  display flex
  align-items center
  .V7_iconfont
    margin-left 10px
    cursor pointer
    color #a5a5ad
.prompt
  height 40px
  line-height 40px
  background #FFFBE6
  width 100%
  color #303753
  padding 0 16px
  z-index 1
  .V7_iconV7tubiao_tishi
    color #FAAD14
    font-size 14px
    margin-right 7px
</style>
